<template>
  <el-dialog :visible.sync="localVisible" width="80%" center append-to-body>
    <div class="preview-container">
      <h2 class="preview-title">{{ article.title }}</h2>
      <div class="preview-content" v-html="article.content"></div>
      <div class="preview-image" v-if="article.cover">
        <img :src="article.cover" alt="文章封面">
      </div>
    </div>
    <template>
      <div class="dialog-footer">
        <el-button @click="closeDialog" type="primary">
          返回
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'ArticlePreview',
  props: {
    article: {
      type: Object,
      required: true,
      default: () => ({
        title: '',
        content: '',
        cover: ''
      })
    },
    visible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      localVisible: this.visible //初始化本地数据
    }
  },
  watch: {
    visible(val) {
      this.localVisible = val;
    },
    localVisible(val) {
      this.$emit('update:visible', val);
    }
  },
  methods: {
    closeDialog() {
      this.$emit('update:visible', false);
    },
  },

}
</script>

<style scoped>
.preview-container {
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.preview-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
}

.preview-content {
  line-height: 1.8;
  margin-bottom: 20px;
}

.preview-image {
  text-align: center;
  margin-bottom: 20px;
}

.preview-image img {
  max-width: 100%;
  height: auto;
  margin: 10px, 0;
  border-radius: 4px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-start;
  padding: 20px;
}
</style>